import React from 'react';
import { SketchPicker, ColorResult, RGBColor } from 'react-color';
export type ColorConfigType = string;

function rgba2Obj(rgba = '') {
  // /^((([^0][0-9]+|0)\.([0-9]{1,2}))$)|^(([1-9]+)\.([0-9]{1,2})$)/
  let reg = /rgba\((\d+),(\d+),(\d+),(\d+|([0-9].[0-9]{1,2}))\)/g;
  let rgbaObj: RGBColor = { r: 0, g: 0, b: 0, a: 1 };

  rgba.replace(reg, (_m, r, g, b, a) => {
    rgbaObj = { r, g, b, a };
    return rgba;
  });
  return rgbaObj;
}

//value 初始值传来，onchange item给的回调
interface ColorProps {
  value?: ColorConfigType;
  onChange?: (v: ColorConfigType) => void;
  onBlur?: () => void;
  style?: object;
}

class colorPicker extends React.Component<ColorProps> {
  state = {
    displayColorPicker: false,
    color: rgba2Obj(this.props.value),
    nowColor: rgba2Obj(this.props.value),
  };
  componentDidMount() {
    this.setState(rgba2Obj(this.props.value));
  }

  componentWillReceiveProps(nexrProps) {
    this.setState({
      color: rgba2Obj(nexrProps.value)
    })
  }

  focus = () => {
    this.setState({ displayColorPicker: true });
  };
  handleClick = () => {
    this.setState({ displayColorPicker: !this.state.displayColorPicker });
    if (!this.state.displayColorPicker) {
      this.props.onBlur?.();
    }
  };

  handleClose = () => {
    const { nowColor } = this.state;
    const { onChange, onBlur } = this.props;
    this.setState({ displayColorPicker: false });
    onChange && onChange(`rgba(${nowColor.r},${nowColor.g},${nowColor.b},${nowColor.a})`);
    onBlur && onBlur();
  };

  handleChange = (color: ColorResult) => {
    this.setState({
      color: color.rgb,
      nowColor: {
        r: color.rgb.r,
        g: color.rgb.g,
        b: color.rgb.b,
        a: color.rgb.a,
      },
    });
  };

  render() {
    return (
      <div className="color_box">
        <div
          style={{
            background: '#fff',
            borderRadius: '1px',
            boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
            display: 'inline-block',
            cursor: 'pointer',
          }}
          onClick={this.handleClick}
        >
          <div
            style={{
              width: '20px',
              height: '20px',
              borderRadius: '2px',
              background: `rgba(${this.state.color.r}, ${this.state.color.g}, ${this.state.color.b}, ${this.state.color.a})`,
            }}
          />
        </div>
        {this.state.displayColorPicker ? (
          <React.Fragment>
            <div
              style={{
                position: 'fixed',
                zIndex: 2000,
                ...this.props.style,
              }}
            >
              <SketchPicker
                color={this.state.color}
                width={'170px'}
                styles={{
                  padding: 0,
                }}
                onChange={this.handleChange}
              />
            </div>
            <div
              style={{
                position: 'fixed',
                top: '0px',
                right: '0px',
                bottom: '0px',
                left: '0px',
                zIndex: 1000,
              }}
              onClick={this.handleClose}
            />
          </React.Fragment>
        ) : null}
      </div>
    );
  }
}

export default colorPicker;
